<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>APP</title>
    <link href="css/weui.min.css" rel="stylesheet"/>
    <link href="css/jquery-weui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/flex.css" rel="stylesheet"/>
    <link href="fonts/iconfont.css" rel="stylesheet"/>
<script src="js/immersed.js"></script>
</head>
<style>
	.main-body{
		background-color: #333;
	}
	.qr{
		text-align: center;
		padding: 30px 0;
		color:#999;
		background-color: #fff;
		margin: 0 20px;
		border-radius: 10px;
	}
	.qr img{
		width: 80%;
		border-radius: 5px;
	}
	.userinfo{
		padding: 10px 13% 5px 13%;
	}
	.userinfo .user-icon{
		width: 50px;
	}
	.user-text{
		font-size: 18px;
		text-align: left;
		padding: 0 0 0 10px;
	}
	.user-level{
		font-size: 14px;
	}
</style>
<body>
<div id="app">
<div class="xiaoyi-header header-red" id="header">
	<div class="xiaoyi-header-left"><i class="iconfont icon-back" onclick="wsClose()"></i></div>
	<div class="xiaoyi-header-title">我的店铺二维码</div>
</div>

<div class="main-body" id="main" flex="main:center cross:center">
	
	<div class="qr">
		<div class="userinfo" flex="">
                <div flex-box="0">
	               	<img :src="userinfo.icon_img+'@!200x200'" class="user-icon" v-if="userinfo.icon"> 
					<img src="images/no-touxiang.png" class="user-icon" v-else>
                </div>
                <div flex-box="1" class="user-text">
	                	<div class="user-name" v-if="userinfo.real_name">{{userinfo.real_name}}</div>
					<div class="user-name" v-else>未设置昵称</div>
					<div class="user-level" v-html="userinfo.phone"></div>
                </div>
            </div>
				
				
	<img class="img_cover" :style="'background-image: url('+qrurl+');'" :src="qrurl" :data-src="drurl">
		<p>长按二维码保存</p>
	</div>
	
	 
</div>	
 </div>   
	<script src="js/mui.min.js"></script>
	<script src="js/jquery-2.1.4.js"></script>
	<script src="js/jquery-weui.min.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/common.js"></script>
	<script src="js/wxShare.js"></script>
	<script src="js/md5.min.js"></script>
	<script src="js/smarge.js"></script>
	<script type="text/javascript" charset="utf-8">
      	mui.init({
				swipeBack: false,
				gestureConfig: {
					tap: false, //默认为true
					doubletap: false, //默认为false
					longtap: true, //默认为false
					swipe: false, //默认为true
					drag: false, //默认为true
					hold: false, //默认为false，不监听
					release: false //默认为false，不监听
				}
			});



		mui.plusReady(function() {
				
				new Vue({
						el: '#app',
						data:{
							qrurl:'',
							drurl:'',
							userinfo:getUserInfo()
						},
						mounted: function() {
								this.inits()
							},
						methods:{
							inits : function(){
								var vm = this;
								log(vm.userinfo)
								vm.qrurl = "http://qr.topscan.com/api.php?bg=ffffff&fg=000000&gc=000000&el=l&w=300&m=10&text=http://shop.51jushi.com/Shop/index/id/"+vm.userinfo.id;
								
								var hb_path = '_downloads/image/' + md5(vm.qrurl) + '.jpg'; //HBuilder平台路径 
								var sd_path = plus.io.convertLocalFileSystemURL(hb_path); //SD卡绝对路径
								var temp = new Image();
									temp.src = sd_path;
								temp.onload = function() { 
									// 1存在, 则直接显示
									console.log('已存在,直接显示==' + sd_path);
									vm.qrurl = sd_path
									vm.drurl = hb_path
								};
								temp.onerror = function() {
									// 2不存在, 则下载图片
									console.log('不存在==' + hb_path);
									var task = plus.downloader.createDownload(vm.qrurl, {
										"filename": hb_path,
										"timeout": 10,
										"retry": 2
									}, function(download, status) {
										//console.log("下载回调status==" + status+"-->"+hb_path);
										if (status == 200) {
											vm.qrurl = plus.io.convertLocalFileSystemURL(download.filename)
											vm.drurl = download.filename
											console.log("下载回调status==" + status+"-->"+hb_path);
										}
									});
									task.start(); 
								};
							},
						}
				});
				
				
		});
		
		document.addEventListener("longtap", function(event) {
				var name = event.target.tagName;
				var img = event.target.getAttribute('data-src');
				//alert(img); return false;
				if(name === "IMG") {
					
					//if(plus.os.name == 'Android') {
						var btnArray = [{ title: "保存到相册" }, { title: "转发好友" }];
					//}
					//if(plus.os.name == 'iOS') {
					//	var btnArray = [{ title: "保存到相册" }];
					// }

					plus.nativeUI.actionSheet({
						title: '图片',
						cancel: "取消",
						buttons: btnArray
					}, function(e) {
						var index = e.index;
						switch(index) {
							case 0:
								break;
							case 1:
								plus.gallery.save(img, function() {
									setTimeout(function(){
										$.toast('保存成功');
									},300)
								}, function() {
									$.toast('保存失败，请重试！','text');
								});
								break;
							case 2:
								
								plus.share.sendWithSystem({pictures:[img]}, function(){ 
									mui.toast('Success');
								}, function(e){
									mui.toast('取消分享 ');
								})
								
								break;
							default:
								// 其它
								break;
						}
					});
				}
			});

    </script>
</body>
</html>